<template>
    <div>
        <van-nav-bar
            title="商家详情"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
        <div>
            <van-card
                :desc='this.describe'
                :title="m_title"
                :thumb="this.img"
            />
        </div>
        <van-tabs v-model="activeName">
            <van-tab title="菜单" name="a">
                <div>
                    <van-tree-select
                    :items="items"
                    :main-active-index.sync="activeIndex"
                    :active-id.sync="activeIds"
                    @click-nav="change"
                    >
                        <template slot='content'>
                            <div class="goods">
                                <div class="shops" v-for="(item,index) in children" :key="index" >
                                    <van-card
                                        num="1"
                                        currency="￥"
                                        :price="item.price"
                                        :desc="item.describe"
                                        :title="item.f_title"
                                        :thumb="item.img_id"
                                        >
                                    <div slot="footer">
                                    <van-button size="mini" 
                                        @click="cartadd(item.f_title,item.price)">
                                        购买
                                    </van-button>
                                    
                                    </div>
                                    </van-card>
                                </div>
                            </div>
                        </template>
                    </van-tree-select>
                </div>
            </van-tab>
            <van-tab title="评价" name="b">
                <div class="pingjia" v-for="(item,index) in pingjia" :key="index">
                    <van-card
                    
                    :tag=item.start
                    :desc=item.describe
                    :title= item.u_name
                    :thumb= item.u_img
                    currency=""
                    />

                     <!-- <img :src="item.u_img" alt=""/>
                    <h6>{{item.u_name}}</h6>
                    <p class="p1">{{item.c_time}}</p>
                    <van-rate
                        readonly
                        v-model="item.start"
                        allow-half
                        void-icon="star"
                        void-color="#eee"
                        size="15px"
                    />
                    <p class="p2">{{item.describe}}</p> -->
                </div>
             </van-tab>
            <van-tab title="商家" name="c">
                <van-divider contentPosition="left">商家图片</van-divider>
                <img :src="m_img" alt="#" width="400px" height="400px"/>
                <van-divider contentPosition="left">商家信息</van-divider>
                <van-cell-group>
                <van-cell title="营业时间" type="datatime">{{s_time}}-{{c_time}}</van-cell>
                <van-cell title="联系方式">{{m_phone}}</van-cell>
                </van-cell-group>
                <van-divider contentPosition="left">商家资质</van-divider>
                <img :src="m_bl" alt="#" width="400px" height="400px"/>
            </van-tab>
        </van-tabs>
            <van-cell  @click="showPopup">
                <van-submit-bar
                    :price="total"
                    button-text="提交订单"
                    @submit="onSubmit"
                />    
            </van-cell>
        <van-popup
            v-model="show"
            position="bottom"
            :style="{ height: '40%' }"
          >
            <van-cell >
                <span @click="gotocart(m_title)">购物车</span>
                    <van-icon name="arrow" />
                    <van-icon class="icon" name="delete" />
                    <div>
                        <table>
                            <router-view v-if="isRouterAlive" />
                            <tr v-for="item in cart" v-bind:value="[item.f_title]" :key="item.f_title">
                                <th width="120px">{{item.f_title}}</th>
                                <th width="50px">{{item.price}}</th>
                                <th width="90px" @click="cartedit(item.f_nmb,item.f_title,item.price)">
                                    <el-input-number 
                                    size="mini" 
                                    v-model="item.f_nmb"
                                    >
                                    </el-input-number>
                                </th>
                            </tr> 
                        </table>
                    </div>
                </van-cell>
            <van-submit-bar
                :price="total"
                button-text="提交订单"
                @submit="onSubmit(total)"
            />
        </van-popup>
    </div>
</template>
<script>
import 'element-ui/lib/theme-chalk/index.css';
import { Loading } from 'element-ui';
import { Card } from 'vant';
import { Rate } from 'vant';
import { Divider } from 'vant';
import {Toast} from 'vant'
export default {
    name:'',
    data(){
        return{
            isRouterAlive:true,
            reload:this.reload,
            describe:'',
            m_title:'',
            img_id:'',//商家头像图片
            activeName: 'a',
            items:[],
            children:[],
            mimg:[],//菜品图片
            activeIds: [1, 2],
            activeIndex: '0',
            data:[],
            c_time:'',//营业结束时间时间
            s_time:'',//营业开始时间
            m_phone:'',//商家电话
 			m_img:'',//商家图片
            m_bl:'',//商家资质图片
            picture_id:[],//评价头像图片
            pingjia:[],
            show: false,
            cart:[],
            img:'',
            umsg:[],
            m_name:'',
            }
        },
        inject:["reload"],
    mounted(){
        this.m_title=this.$route.query.m_title;
        this.describe=this.$route.query.describe;
        this.img_id=this.$route.query.img_id;
        this.m_name=this.$route.query.m_name
        let username= sessionStorage.getItem('username');
        this.axios.get('http://www.shop.com:8080/api.php/common/getPictureList?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6').then(res =>{
            this.data=res.data.data
        })
        //-------------------------商家列表------------------商家图片显示方法------------------------//
        this.axios.get('http://www.shop.com:8080/api.php/common/getMerchantsList?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&m_title='+this.m_title)
        .then(res=>{
            this.m_phone=res.data.data.merchants[0].m_phone
            this.c_time=res.data.data.merchants[0].c_time
            this.s_time=res.data.data.merchants[0].s_time
            for(var i=0;i<this.data.length;i++){
                if(res.data.data.merchants[0].img_id==this.data[i].id){
                this.m_img ="http://www.shop.com:8080/upload/picture/"+this.data[i].path
                }
                if(res.data.data.merchants[0].m_bl==this.data[i].id){
                    this.m_bl ="http://www.shop.com:8080/upload/picture/"+this.data[i].path
                }
            }
            this.img=sessionStorage.getItem('img_id');
        }),

        //--------------------------------------------商家菜品列表-------以及分类显示--------------------------//
        this.axios.get('http://www.shop.com:8080/api.php/common/getfoodslist?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&m_title='+this.m_title)
        .then(res=>{
            this.data=res.data.data.foods;
           
            this.children=this.data[this.activeIndex];
            for(let i=0;i<this.data.length;i++){
                this.items.push({text:this.data[i].f_type})  
            }
            this.axios.get('http://www.shop.com:8080/api.php/common/getfoodslist?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&m_title='+this.m_title+'&&f_type='+this.data[0].f_type)
            .then(res=>{ 
                this.children=res.data.data.foods; 
                this.mimg=res.data.data; 
                for(var i=0;i<this.children.length;i++)
                {
                    for(var j=0;j<this.mimg.picture.length;j++)
                    {
                        if(this.children[i].img_id==this.mimg.picture[j].id)
                        {
                            this.children[i].img_id="http://www.shop.com:8080/upload/picture/"+this.mimg.picture[j].path
                            
                        }
                    }
                }
            })  
        });

        //-------------------------评价------评价图片-----------------------
        this.axios.get('http://www.shop.com:8080/api.php/common/getPingjiaList?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&m_title='+this.m_title)
        .then(res=>{
            this.pingjia=res.data.data;
        });
        //------------------------------购物车列表-----------------------------
        this.axios.get('http://www.shop.com:8080/api.php/common/getfoodcartslist?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&u_name='+username+'&&m_title='+this.m_title)
        .then(res=>{
            this.cart=res.data.data;
        });
    },
    methods: {
         change:function(num){
            this.axios.get('http://www.shop.com:8080/api.php/common/getfoodslist?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&m_title='+this.m_title+'&&f_type='+this.items[num].text)
            .then(res=>{ 
                this.children=res.data.data.foods; 
                this.mimg=res.data.data; 
                for(var i=0;i<this.children.length;i++){
                    for(var j=0;j<this.mimg.picture.length;j++){
                    if(this.children[i].img_id==this.mimg.picture[j].id){
                    this.children[i].img_id="http://www.shop.com:8080/upload/picture/"+this.mimg.picture[j].path
                        }
                    }
                }
            })   
        },
        showPopup() {
        this.show = true;
        },
        cartadd(f_title,price){
            let username= sessionStorage.getItem('username');
            if(!username){
              var that=this;
                Toast({
                message:'请先登录',
                duration:1000,
                onClose:function(){
                    that.$router.push('/login');
                }
                });
            }else{
            this.f_title=f_title;
            this.price=price;
            this.img_id=1;
            this.f_nmb=1;
            this.f_sum=this.price*this.f_nmb;
            this.axios.post(
            "http://www.shop.com:8080/api.php/common/getFoodcartsAdd?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&u_name=" +
                username +"&&f_title=" +this.f_title+"&&m_title=" +this.m_title+"&&img_id=" +this.img_id
                +"&&f_nmb=" +this.f_nmb+"&&price=" +this.price+"&&f_sum=" +this.f_sum
            ).then(res=>{
                Toast({
                message:res.data.msg,
                duration:1000,
            });
            this.reload()
        })}
        },
        onSubmit(total){
            let m_title=this.m_title;
            let m_name = this.m_name;
             for(let i=0;i<this.cart.length;i++){
            let f_title=this.cart[i].f_title;
            let f_nmb=this.cart[i].f_nmb;
            this.describe=f_title+f_nmb
             }
             let describe=this.describe
            let username= sessionStorage.getItem('username');
            this.axios.post("http://127.0.0.1:3000/createorder",{username:username,m_title:m_title,describe:describe,m_name:m_name}
            ).then(res=>{
                 this.$router.push('/order');
            window.open(res.data.url);
            })
        
    },
        cartedit(f_nmb,f_title,price){
            this.$nextTick(()=>this.isRouterAlive=true)
            this.isRouterAlive=false
            this.f_title=f_title;
            this.price=price;
            this.f_nmb=f_nmb;
            this.f_sum=this.price*this.f_nmb;
            let username= sessionStorage.getItem('username');
            this.axios.post(
            "http://www.shop.com:8080/api.php/common/getFoodcartsEdit?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&u_name="+username+"&&f_title=" +this.f_title
            +"&&m_title=" +this.m_title+"&&f_nmb=" +this.f_nmb+"&&price=" +this.price+"&&f_sum=" +this.f_sum
            ).then(res=>{
                Toast({
                message:res.data.msg,
                duration:1000,
            });
           
        })
         this.reload()
    },
    gotocart(m_title){

        this.$router.push({name:'Cart',query:{m_title:m_title}});
    },
    onClickLeft(){
        this.$router.go(-1);
    },
    },

    computed: {
         total(){
             let total=0;
                for(let i=0;i<this.cart.length;i++){
                    total+=this.cart[i].f_sum*100
                }
            return total;
        }
    }, 
    
}

</script>
<style  scoped>
.pingjia{
    border-bottom:1px solid;
    height:120px;
}
.pingjia img{
    border-radius: 50%;
    width:45px;
    height:45px;
    margin-top: 12px;
    margin-left: 15px;
    float: left;

}
.pingjia h6{
    font-family: '华文新魏';
    font-size:20px;
    margin-top:15px;
    margin-left: 15px;
     float: left;

}
.pingjia .van-rate{
    margin-top: 41px;
    margin-left: -75px;
    float: left;

}
.pingjia .p2 {
    float: left;
     margin-top: 60px;
     margin-left: -90px;

}
.pingjia .p1{
    float:right;
    font-size: 13px;
}
.van-cell span{
    font-size: 17px;
}
.van-cell .van-icon{
    font-size: 18px;
    margin-left:15px;

}
.icon{
    float: right;
}
</style>